<template>
	<view style="background-color: #F7F7F6; ">
		<!-- 搜索部分 -->
		<view class="container">
			<!-- 小程序头部兼容 -->
			<!-- <uni-search-bar radius="20" placeholder="搜索服务" clearButton="always" cancelButton='none' @confirm="search" /> -->
			<!-- <headers :colors="colors" :locations="locations" :swiperList="swiperList" ></headers> -->
			<view>
				<!-- 搜索框容器 -->
				<view class="search-container">
					<!-- 搜索框内部盒子 -->
					<view class="search-box">
						<!-- 使用uni-ui 提供的图标组件 -->
						<uni-icons type="search" size="17"></uni-icons>
						<text class="search-content" @click="gotoSearch">搜索</text>
					</view>
				</view>

			</view>
			<view class="area">
				重庆
				<uni-icons type="bottom" size="15"></uni-icons>
			</view>
		</view>
		<!-- banner图 -->
		<!-- <view class="banner">

		</view> -->
		<!-- 轮播图 -->
		<swiper class="screen-swiper square-dot" :indicator-dots="false" :circular="true" :autoplay="true"
			interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<!-- <image :src="item.img" mode="aspectFill" class="bannerImg"></image> -->
				<view :style="{backgroundImage: `url(${item.img})` }" class="bannerImg"></view>
			</swiper-item>
		</swiper>
		<view class="indicator">
			<view v-for="(item, index) in swiperList" :key="index" :class="currentSwiper == index ? 'on' : 'dots'">
			</view>
		</view>


		<!-- 项目分类 -->
		<view class="classify">
			<view class="" v-for="item in classify">
				<view class="classify-box" @click="targetOther(item.title)">
					<view class="classify-img" :style="{background:item.color}">

					</view>
					<view class="classify-text">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>


		<!-- 超值优惠 -->
		<view class="preferential">
			<!-- 优惠标题 -->
			<u-section title="超值优惠" sub-title="查看更多" :show-line="false" class="section" font-size="32"></u-section>

			<!-- 优惠内容 -->
			<view class="pre_content">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view id="demo" class="scroll-view-item_H uni-bg-red" v-for="item in preferentialData"
						:key="item.id">
						<view class="pre_img">
						</view>
						<view class="title">
							<span class="tuan">团</span>
							<span class="text">仅售{{item.price}}元！{{item.title}}</span>
						</view>
						<view class="price">
							<span class="now_price"><span class="icon">￥</span>{{item.price.toFixed(2)}}</span>
							<span class="old_price"
								style="text-decoration-line: line-through;">店面价：{{item.storePrice}}元</span>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 为你推荐 -->
		<view class="recom">
			<!--<view class="title">
				<text class="big">为你推荐</text>
				<text class="small" @click="targetOther('recommend')">查看更多</text>
			</view> -->
			<!-- 优惠标题 -->
			<u-section title="为你推荐" sub-title="查看更多" :show-line="false" class="section title_recommend" font-size="32"
				@click="targetOther('recommend')"></u-section>
			<!-- 分类列表 -->
			<view class="recommend">
				<view class="tj-box" v-for="item in recommend">
					<view class="tj-img" :style="{backgroundImage:`url(${item.cover_pic})`}">
					</view>
					<view class="tj-txt" @click="gotoGoods(item.id)">
						<view class="title">
							{{item.name}}
						</view>
						<view class="tj-wz">
							<view style="color: #A0A0A0;">
								<uni-icons color='#F6637C' type="location-filled" size="20"></uni-icons>
								沙坪坝步行街
							</view>
							<view class="" style="color: #FE2121;">
								250m
							</view>
						</view>
						<view class="tj-zl">
							<view class="">
								{{item.name}}
							</view>
							<view class="tj-wm">
								支持外卖
							</view>
						</view>
						<view class="quan">
							<view class="icon">
								券
							</view>
							<view class="txt">
								38元抵100元代金券
							</view>
						</view>
						<view class="quan">
							<view class="icon" style="background: #EFFAF6;color: #5CC9A5;">
								团
							</view>
							<view class="txt">
								4元套餐48.8元；6人套餐228元短标；4人 餐188元（原价264元）短标；8人餐短标。
							</view>
						</view>
						<view class="quan">
							<view class="icon" style="background: #FDF2EC;color: #ED7944;">
								拼
							</view>
							<view class="txt">
								青椒肉丝炒饭10元短标
							</view>
						</view>
						<view class="quan">
							<view class="icon" style="background: #F0FAEB;color: #6DC83B;">
								免
							</view>
							<view class="txt">
								冰柠檬水免费赠饮一杯，回锅肉炒饭一份 短标。
							</view>
						</view>
					</view>
				</view>
			</view>

			<uni-load-more :status="status" iconType="snow" iconSize="20"></uni-load-more>

		</view>
	</view>


</template>

<script>
	import api from '@/api/api.js'
	import {
		getHomeRecommend
	} from '@/api/home.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				showClearIcon: false,
				inputClearValue: '',
				classify: [{
						title: '休闲娱乐',
						color: '#E6F0FF'
					},
					{
						title: '美食外卖',
						color: ' #FFF7E9'
					},
					{
						title: '培训爱好',
						color: '#FEEEED'
					},
					{
						title: '旅游出行',
						color: '#EFF8F2'
					},
					{
						title: '生活其他',
						color: '#F0F0FE'
					},
				],
				//商品列表
				recommend: [{
						title: '阿里与艾德炭烤麻里牛排海鲜 ...',
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e60ff74276e14057bf05a815d2e5568c_mergeImage.png'

					},
					{
						title: '阿里与艾德炭烤麻里牛排海鲜 ...',
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e60ff74276e14057bf05a815d2e5568c_mergeImage.png'

					},
					{
						title: '阿里与艾德炭烤麻里牛排海鲜 ...',
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e60ff74276e14057bf05a815d2e5568c_mergeImage.png'

					}, {
						title: '阿里与艾德炭烤麻里牛排海鲜 ...',
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e60ff74276e14057bf05a815d2e5568c_mergeImage.png'

					}
				],
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				color: 'red',
				// 轮播图图片
				swiperList: [{
					img: '/static/temp/banner1.jpg'
				}, {
					img: '/static/temp/banner3.jpg'
				}, {
					img: '/static/temp/banner4.jpg'
				}],
				locations: {},
				colors: '',
				preferentialData: [{
						id: 0,
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4e08c295015249f89261c48d71c7ce93_mergeImage.png',
						title: '价值312的4人自…',
						price: 226,
						storePrice: 400
					},
					{
						id: 1,
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4e08c295015249f89261c48d71c7ce93_mergeImage.png',
						title: "价值312的4人自…",
						price: 199,
						storePrice: 400
					}, {
						id: 2,
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4e08c295015249f89261c48d71c7ce93_mergeImage.png',
						title: '价值312的4人自…',
						price: 99,
						storePrice: 400
					}
				],
				status: 'more'
			};
		},

		onLoad() {
			this.loadData();
			this.getHomeRecommend()
		},
		onShow() {
			this.setData({
				colors: app.globalData.newColor
			});
			uni.setNavigationBarColor({ //设置标题栏颜色
				// backgroundColor: app.globalData.newColor,
				// frontColor: '#ffffff'
			});
			// #ifdef H5
			let locations = getlocation() //获取位置信息
			if (locations) {
				this.locations = locations
			}
			// #endif
		},
		methods: {
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {

				let carouselList = await api.post('Demo/test1');
				this.recommend = carouselList.data;

			},
			clearInput: function(event) {
				this.inputClearValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			getHomeRecommend() {
				const data = {
					lat: 106,
					lng: 26,
					city_id: 902
				}
				api.post('index/homeRecommend', data).then(res => {
					if (res) {
						console.log('res', res);
					}
				});
			},
			// 跳转到search页面
			gotoSearch() {
				console.log('跳转到Search');
				uni.navigateTo({
					url: '/pages/components/home/search'
				})
			},
			gotoGoods(i){
				console.log(i);
				var url = '/pages/product/product?id='+i
				uni.navigateTo({
					url: url
				})
			},
			targetOther(name) {
				if (name === '生活其他') {
					console.log(name);
					uni.navigateTo({
						url: '/pages/liveOther/index'
					})
				} else if (name === 'recommend') {
					console.log(name);
					uni.navigateTo({
						url: '/pages/recommend/recommend'
					})
				}
			},
			//超级优惠 --滑块
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			//加载状态
			onChange(value) {
				this.status =value
			},
		},
		onReachBottom() {
			this.onChange('loading')
			setTimeout(() => {
				this.recommend = [...this.recommend]
				this.onChange(('noMore'));
			},1000)
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		background: #fff;

		// border: 1px solid red;
		// height: 190px;
		.search-container {
			width: 240px;
			// height: 100rpx;
			// background-color: #ff1e0a;
			display: flex;
			align-items: center;
			// 上下 0 间距， 左右20间距
			padding: 0rpx 20rpx;
			// border: 1px solid red;

			.search-box {
				background-color: #ffffff;
				border-radius: 100rpx;
				border: 1px solid red;
				height: 72rpx;
				width: 100%;
				display: flex;
				// 整体块级元素横向居中
				justify-content: center;
				// 项目内部元素居中
				align-items: center;

				.search-content {

					text-align: center;
					font-size: 30rpx;
					margin-left: 10rpx;
				}
			}
		}

		.area {
			padding-right: 20px;
			// width: 33px;
			height: 22px;
			font-size: 14px;
			font-family: Humnst777 BT-Roman, Humnst777 BT;
			font-weight: 600;
			color: #242424;
			line-height: 33px;

			.uni-icons {
				padding-left: 5px;
				color: 000;
			}
		}

		/deep/ .uni-searchbar {
			width: 70%;
			height: 30px;
			padding: 0 10px;

			.uni-searchbar__box {
				height: 30px;
				justify-content: left;
			}
		}
	}

	.screen-swiper {
		display: block;
		border: 1px solid goldenrod;

		.bannerImg {
			width: 100% !important;
			height: 100% !important;
			background-size: cover;
		}
	}

	.classify {
		padding: 15px 10px;
		display: flex;
		justify-content: space-around;
		background: #fff;

		.classify-box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.classify-img {
				width: 57px;
				height: 57px;
				border-radius: 50px;
			}

			.classify-text {
				font-size: 11px;
				font-family: Roboto-Thin, Roboto;
				font-weight: 500;
				color: #262B2E;
				padding: 5px 0;
			}
		}

	}

	.discounts {
		padding: 0 15px;
		padding-top: 20px;
		background: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: end;
		}

		.card {
			display: flex;
			flex-wrap: nowrap;
			overflow: auto;

			/deep/.uni-card {
				overflow: unset;
				padding: 0 !important;
				margin: 10px 10px 10px 0px !important;
				border-radius: 20px !important;

				.uni-card__content {
					padding: 0 !important;

					.uni-body {
						display: flex;
						padding: 5px;

						.tuan {
							width: 22px !important;
							height: 22px !important;
							background: #EFFAF6;
							border-radius: 5px 5px 5px 5px;
							font-size: 12px;
							font-family: Roboto-Regular, Roboto;
							font-weight: 400;
							color: #5CC9A5;
							text-align: center;
							margin-right: 5px;
						}
					}

					.price {
						display: flex;
						padding: 10px 5px;

						.newprice {
							font-size: 20px;
							font-family: Roboto-Bold, Roboto;
							font-weight: bold;
							color: #FE2121;
						}

						.oldprice {
							padding-left: 15px;
							font-size: 11px;
							font-family: Roboto-Thin, Roboto;
							font-weight: 100;
							color: #999999;
							text-decoration: line-through
						}
					}
				}
			}

			/deep/ .uni-card__cover {
				margin-top: 0 !important;
				border-radius: 20px !important;

				.uni-card__cover-image {
					height: 136px !important;
					width: 266px !important;
				}
			}

		}
	}

	.recom {
		padding: 0 10px;
		margin-top: 40rpx;

		.u-section {
			padding: 0 15px !important;
		}
	}

	//列表
	.recommend {
		// padding: 0 15px;
		padding-top: 15px;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: end;
		}

		.tj-box {
			display: flex;
			justify-content: space-between;
			border-bottom: 0.5px solid #F6F6F6;
			border-radius: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			padding: 10px;

			.tj-img {
				width: 184rpx;
				height: 184rpx;
				border-radius: 12px;
				background: no-repeat;
				background-size: 100%;
			}

			.title {
				font-weight: 600;
			}

			.tj-txt {
				width: 220px;

				.tj-wz {
					display: flex;
					justify-content: space-between;
					padding-top: 10px;
				}

				.tj-zl {
					display: flex;
					font-size: 11px;
					font-family: Roboto-Regular, Roboto;
					font-weight: 400;
					color: #999999;
					padding-top: 10px;

					.tj-wm {
						padding-left: 20px;
						color: #FFD150;
					}
				}

				.quan {
					display: flex;
					padding-top: 10px;
					align-items: baseline;

					.icon {
						margin-right: 10px;
						background: #FFE9E9;
						width: 22px !important;
						height: 22px;
						font-size: 12px;
						font-family: Roboto-Regular, Roboto;
						font-weight: 400;
						color: #FE2121;
						text-align: center;
						line-height: 23px;
						border-radius: 5px 5px 5px 5px;
					}

					.txt {
						font-size: 11px;
						font-family: Roboto-Regular, Roboto;
						font-weight: 400;
						color: #242424;
						width: calc(100% - 22px);
					}
				}
			}
		}
	}

	.big {
		font-size: 16px;
		font-family: Roboto-Bold, Roboto;
		font-weight: bold;
		color: #262B2E;
	}

	.small {
		font-size: 11px;
		font-family: Roboto-Regular, Roboto;
		font-weight: 400;
		color: #262B2E;
	}



	// 优惠
	.preferential {
		padding: 0 20rpx;
		margin-top: 40rpx;
		box-sizing: border-box;

		.section {}

		.swiper {
			margin-top: 40rpx;
		}
	}

	.pre_content {
		margin-top: 40rpx;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		display: subgrid;
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 528rpx;
		border-radius: 20rpx;
		margin-right: 26rpx;
		background-color: #fff;

		.title {
			margin-top: 12rpx;
			padding: 0 34rpx 0 15rpx;
			font-weight: 600;
			line-height: 40rpx;

			.tuan {
				font-size: 24rpx;
				color: #FF8439;
				font-weight: normal;
				padding: 5rpx;
				margin-right: 8rpx;
				border-radius: 50%;
				background-color: #FF8439 80%;
			}
		}

		.price {
			padding: 4rpx 34rpx 20rpx 15rpx;

			.now_price {
				font-size: 34rpx;
				color: #FF1A1A;
				font-weight: 600;
				padding-right: 22rpx;

				.icon {
					font-size: 26rpx;
				}
			}

			.old_price {
				font-size: 22rpx;
				color: #929292;
			}
		}
	}

	.scroll-view-item_H:last-child {
		margin: 0;
	}

	.pre_img {
		width: 526rpx;
		height: 252rpx;
		background: url('https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4e08c295015249f89261c48d71c7ce93_mergeImage.png') no-repeat;
	}
</style>